<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div id="mapContainer"></div>
    <ul id="toolbar">
      <li><button @click="addStraightArrow">直箭头</button></li>
      <li><button @click="addFineArrow">细直箭头</button></li>
      <li><button @click="addAssaultDirection">突击方向</button></li>
      <li><button @click="addAttackArrow">进攻方向</button></li>
      <li><button @click="addTailedAttackArrow">进攻方向（尾）</button></li>
      <li><button @click="addSquadCombat">分队战斗行动</button></li>
      <li><button @click="addTailedSquadCombat">分队战斗行动（尾）</button></li>
      <li><button @click="addDoubleArrow">钳击</button></li>
      <li><button @click="addGatheringPlace">聚集地</button></li>
      <hr>
      <li><button @click="clearPlots">清空</button></li>
    </ul>
  </div>
</template>

<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
// 计算工具
import '@/../libdist/PlotUtil.min.js'
// 标绘图形
import '@/../libdist/Plots.min.js'

export default {
  name: 'HelloWorld',
  data() {
    return {
      map: null,
      plotLayer: null,
      msg: 'Leaflet的plot军事标绘'
    }
  },
  methods: {
    clearPlots() {
      this.plotLayer && this.plotLayer.clearLayers()
    },
    // 直箭头
    addStraightArrow() {
      L.Plot.straightArrow([[36.145499 , 119.838867],[36.295066 , 119.852600]])
      .addTo(this.plotLayer)
    },
    // 细直箭头
    addFineArrow() {
      L.Plot.fineArrow([[36.280676 , 119.903412],[36.143281 , 119.895172]])
      .addTo(this.plotLayer)
    },
    // 突击方向
    addAssaultDirection() {
      L.Plot.assaultDirection([[36.142172 , 119.941864],[36.276248 , 119.962463]])
      .addTo(this.plotLayer)
    },
    // 进攻方向
    addAttackArrow() {
      L.Plot.attackArrow([[36.146608 , 119.994049],[36.145499 , 120.017395],[36.288425 , 119.996796]])
      .addTo(this.plotLayer)
    },
    // 进攻方向（尾）
    addTailedAttackArrow() {
       L.Plot.tailedAttackArrow([[36.138845 , 120.039368],[36.141063 , 120.064087],[36.260746 , 120.050354]])
      .addTo(this.plotLayer)
    },
    // 分队战斗行动
    addSquadCombat() {
      L.Plot.squadCombat([[36.141063 , 120.102539],[36.248565 , 120.102539],[36.370295 , 120.261841]])
      .addTo(this.plotLayer)
    },
    // 分队战斗行动（尾）
    addTailedSquadCombat() {
      L.Plot.tailedSquadCombat([[36.145569 , 120.189056],[36.148341 , 120.232315],[36.378035 , 120.362091]])
      .addTo(this.plotLayer)
    },
    // 钳击
    addDoubleArrow() {
      L.Plot.doubleArrow([[36.076713 , 120.261841],[36.081153 , 120.390930],[36.206468 , 120.293427],[36.144390 , 120.318146]])
      .addTo(this.plotLayer)
    },
    // 聚集地
    addGatheringPlace() {
      L.Plot.gatheringPlace([[36.151044 , 120.510406],[36.195387 , 120.605164],[36.261854 , 120.559845]])
      .addTo(this.plotLayer)
    }
  },
  mounted() {
    let map = L.map('mapContainer')
    L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
      maxZoom: 18,
      minZoom: 3,
      attribution: "高德地图",
      subdomains: ["1", "2", "3", "4"]
    }).addTo(map)
    map.setView([36.35, 120.36], 10)
    this.map = map
    this.plotLayer = L.featureGroup().addTo(map)
  },
  beforeDestroy() {
    this.plotLayer && this.plotLayer.remove()
    this.map && this.map.remove()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  position: relative;
}
#mapContainer {
  width: 100%;
  height: 600px;
  background-color: #eee;
  z-index: 0;
}
#toolbar {
  position: absolute;
  left: 10px;
  bottom: 10px;
  list-style: none;
  margin: 0;
  padding: 10px;
  box-shadow: 2px 2px 5px;
  background-color: rgb(34 34 34 / 50%);
  border-radius: 0 5px 5px 0;
}
#toolbar li {
  line-height: 28px;
}
</style>
